<template>
   <div class="card" style="margin-bottom: 10px;">
      <div>
      <el-button type="primary" @click="handleAdd">新建文件夹</el-button>
      <el-button type="info" @click="file_upload">上传</el-button>
      <el-button type="primary" @click="back">回退</el-button>
      </div>

      <div>
        <!-- {{ this.$store.state.projectInfo.project_id }} -->

        <!-- 根文件夹显示 -->
        <el-table :data="data.Rootfolder" style="width: 100%," v-if="data.Rootvisible" @row-click="afterRoot">
          <!-- 图标 -->
          <el-table-column width="40">
            <el-icon size="25"><Folder /></el-icon>
          </el-table-column>
          <!-- 文件夹名 -->
          <el-table-column prop="folder_name" style="color: blue;"/>
        </el-table>

        <!-- 子文件夹显示 -->
        <el-table :data="data.folder" style="width: 100%," v-if="data.Foldervisible" @row-click="nextfolder">
          <!-- 图标 -->
          <el-table-column width="40">
            <el-icon size="25"><Folder /></el-icon>
          </el-table-column>
          <!-- 文件夹名 -->
          <el-table-column prop="folder_name"/>
          <!-- 删除 -->
          <el-table-column  width="100">
            <template #default="scope">
              <el-button type="danger" @click.stop="DeleteFolder(scope.row)" plain>删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 新建文件夹 -->
      <el-dialog width="35%" v-model="data.addVisible" title="新增文件夹">
        <el-form :model="data.addform" label-width="100px" label-position="right" style="padding-right: 40px">
          <el-form-item label="文件夹名">
            <el-input v-model="data.addform.folder_name" autocomplete="off" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="data.addVisible = false">取 消</el-button>
            <el-button type="primary" @click="addsave">保 存</el-button>
          </span>
        </template>
      </el-dialog>

        <!-- 文件显示 -->
        <el-table :data="data.file" style="width: 100%,padding:0;" v-if="data.Filevisible" @row-click="Filedownload">
          <el-table-column width="40">
            <el-icon size="20"><Files /></el-icon>
          </el-table-column>
          <el-table-column prop="file_name"/>
          <!-- 删除 -->
          <el-table-column  width="100">
            <template #default="scope">
              <el-button type="danger" @click.stop="DeleteFile(scope.row)" plain>删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 文件上传 -->
      <el-dialog width="35%" v-model="data.uploadvisible" title="上传文件">
        <div>
          <input type="file" ref="fileInput" @change="handleFileChange" />
          <el-button type="info" @click="uploadFile">上传文件</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import { handleError, reactive } from "vue";
import { Calendar, Search } from '@element-plus/icons-vue'
import request from "@/utils/request";
import { ElMessage, ElMessageBox } from "element-plus";
import axios from "axios";
import {useStore} from 'vuex'
import router from "@/router"
import { ref } from 'vue';

const store=useStore()

const data=reactive({
  // 获取project_id
  project_id:store.state.projectInfo.project_id,
  //获取parent_id和folder_id
  parent_id:null,
  folder_id:'',

  Rootfolder:[],
  Rootvisible:true,

  Foldervisible:false,
  folder:[],

  addVisible:false,
  addform:{},

  Filevisible:false,
  File:[],

  //上传文件
  uploadvisible:false,
  file:[],
  file_name: '',
  staff_id:store.state.employeeInfo.staff_id,

})

// 显示根目录
const Rootload=()=>{
  axios.get('http://localhost:8088/GET/ProjectRootFolder',{
    params:{
      project_id:data.project_id
    }
  }).then(res=>{
    data.Rootfolder=res.data.data.ProjectRootFolder
    // 将当前parent_id和folder_id存入全局变量
    store.commit('update_folder_id',data.Rootfolder[0].folder_id)
    store.commit('update_parent_id',data.Rootfolder[0].parent_id)
  })
}

Rootload()

//根目录到次级目录
const afterRoot=()=>{
  data.Rootvisible=false
  //parent_id为存入全局变量的folder_id
  data.parent_id=store.state.FolderInfo.folder_id
  Folderload()
  Fileload()
}

// 显示子目录
const Folderload=()=>{
  axios.get('http://localhost:8088/GET/FolderByParentFolder',{
    params:{
      parent_id:data.parent_id
    }
  }).then(res=>{
    data.folder=res.data.data.FolderList
    //判断数组是否为空
    if(Array.isArray(data.folder) && data.folder.length === 0){
      data.Foldervisible=false
    }else{
      data.Foldervisible=true
    }
  })
}

const nextfolder=(row)=>{
  data.parent_id=row.folder_id
  Folderload()
  Fileload()
}

//新建文件夹
const handleAdd=()=>{
  data.addform={}
  data.addform.project_id=store.state.projectInfo.project_id
  data.addform.parent_id=data.parent_id
  data.addVisible=true
}
const addsave=()=>{
  axios.post('http://localhost:8088/POST/CreateNewFolder',data.addform).then(res=>{
    if(res.data.success){
      ElMessage.success("添加成功")
      console.log(res)
      if(data.parent_id==null){
        data.Rootvisible=true
        data.Foldervisible=false
        Rootload()
      }else{
        Folderload()
      }
      data.addVisible=false
    }else{
      ElMessage.error("添加失败")
    }
  })
}

//回退到根目录
const back=()=>{
  data.Foldervisible=false
  data.Filevisible=false
  data.Rootvisible=true
  Rootload()
}

//删除文件夹
const DeleteFolder=(row,event)=>{
  console.log(row.folder_id)
  const formdata = new FormData();
  formdata.append('folder_id',row.folder_id);
  axios.post('http://localhost:8088/POST/DeleteFolderByFolderId',formdata).then(res=>{
    if(res.data.success){
      ElMessage.success("删除成功")
        Folderload()
    }else{
      ElMessage.error("删除失败")
    }
  })
}

//显示文件
const Fileload=()=>{
  axios.get('http://localhost:8088/GET/FileInfoByFolder',{
    params:{
      folder_id:data.parent_id
    }
  }).then(res=>{
    data.file=res.data.data.FileInfoList
    //判断数组是否为空
    if(Array.isArray(data.file) && data.file.length === 0){
      data.Filevisible=false
    }else{
      data.Filevisible=true
    }
  })
}

//上传文件
const file_upload=()=>{
  data.uploadvisible=true
}

const handleFileChange=(event)=>{
  data.file.value = event.target.files[0];
  console.log(data.file.value)
  data.file_name=data.file.value.name
  console.log(data.file_name)
}

const uploadFile=()=>{
  const formData = new FormData();
  formData.append('file_name',data.file_name);
  formData.append('folder_id', data.parent_id);
  formData.append('staff_id', data.staff_id);
  formData.append('multipartFile', data.file.value);
  axios.post('http://localhost:8088/POST/fileUpload',formData).then(res=>{
    console.log(res)
    if(res.data.success){
      ElMessage.success("上传成功")
      data.uploadvisible=false
      Folderload()
      Fileload()
    }else{
      ElMessage.error("上传失败")
    }
  })
}

//下载文件
const Filedownload=(row)=>{
  console.log(row)
  const filepath =row.file_path;
  console.log(filepath)
  window.open(`http://localhost:8088/GET/fileDownLoad?filePath=${filepath}`,'_blank');
}


//删除文件
const DeleteFile=(row)=>{
  console.log(row.file_id)
  const formdata = new FormData();
  formdata.append('file_id',row.file_id);
  axios.post('http://localhost:8088/POST/deleteFileByFileId',formdata).then(res=>{
    if(res.data.success){
      ElMessage.success("删除成功")
        Fileload()
    }else{
      ElMessage.error("删除失败")
    }
  })
}

</script>